<template>
	<view
		class="header-box"
		:style="{'padding-top': paddingNone?0:systeminfo.statusBarHeight + 'px', 'height': (systeminfo.windowTop || 44) + 'px'}">
		<view
			:class="['iconfont', 'header', statics?'static':'', borderNone?'border-none':'', zClass]"
			:style="{'background':background, 'color':color, 'padding-top': paddingNone?0:systeminfo.statusBarHeight + 'px', 'height': (systeminfo.windowTop || 44) + 'px'}">
			<view class="left">
				<text v-if="(urlType || url) && !hasLeftSlot" class="back-btn" @click="backEvent">&#xe609;</text>
				<slot name="left"/>
			</view>
			<view class="web-font-thin title"><slot/></view>
			<view class="right"><slot name="right"/></view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			'zClass':{type:String},
			'url':{type:String},
			'urlType':{type:String},
			'title':{type:String},
			'background':{type:String},
			'color':{type:String},
			'statics':{type:Boolean},
			'paddingNone':{type:Boolean},
			'borderNone':{type:Boolean}
		},
		mounted() {
			if(this.$slots.left) this.hasLeftSlot = true
		},
		data(){
			return{
				systeminfo: this.$systemInfo,
				hasLeftSlot: false,
				showBg: false
			}
		},
		methods:{
			backEvent(){
				switch(true){
					case this.urlType==='navigateBack':
						uni.navigateBack()
						break
					case this.url&&!this.urlType:
						uni.navigateTo({
							url:this.url
						})
						break
					case this.urlType==='switchTab':
						uni.switchTab({
							url:this.url
						})
						break
					default:
						return false
				}
			}
		}
	}
</script>

<style lang="scss">
	.header-box{
		height: 88upx;
	}
	.header{
		display: flex;
		height: 88upx;
		padding-top: 40upx;
		box-sizing: content-box;
		width: 100%;
		position: fixed;
		z-index: 99;
		left: 0;
		top: 0;
		color: $title-color;
		border-bottom: solid 1px rgba(255,255,255,0.15);
		background: $primary-color;
		&.border-none{
			border: 0;
		}
		&.static{
			position: relative;
		}
		.left,.title,.right{
			flex: 1;
			display: flex;
		}
		.title{
			align-items: center;
			align-content: center;
			justify-content: center;
			flex-wrap: wrap;
			flex: 1 0 auto;
			padding: 0 30upx;
			.text{
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
		}
		.right{
			justify-content: flex-end;
			align-items: center;
			align-content: center;
			display: flex;
			flex-wrap: wrap;
		}
		.back-btn{
			width: 90upx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
